<meta name="viewport"
      content="width=device-width,
      height=device-height,
      initial-scale=1.0,
      minimum-scale=1.0,
      maximum-scale=1.0,
      user-scalable=no"
>

<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}

<!-- 写入 base.html 中定义的 title -->
{% block title %}
    文章详情
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}


<!-- 文章详情 -->
<div class="container">
    <div class="row">
        <!-- 标题及作者 -->
        <h1 class="col-12 mt-4 mb-4">{{ article.title }}</h1>

        <div class="col-12 alert alert-success">
            {#    作者才显示文章处理接口    #}
            <div>
                作者：{{ article.author }}
                {% if user == article.author %}
                    · <a href="#" onclick="confirm_delete()">删除文章</a>
                    <!-- 新增一个隐藏的表单 -->
                    <form
                          style="display:none;"
                          id="safe_delete"
                          action="{% url 'article:article_safe_delete' article.id %}"
                          method="POST"
                          class="layui-form"
                          >
                        {% csrf_token %}
                        <button type="submit">发送</button>
                    </form>


                    · <a href="{% url 'article:article_update' article.id %}">
                        编辑文章
                    </a>
                {% endif %}
            </div>

            <div>
                {% if article.href %}
                    来源：<a href={{ article.href }} title="跳转到"
                          target="_blank"
                          style="text-decoration:underline;"
                          id="jump_href"
                    >
                    <<{{article.href_title}}>>
                    </a>

                {% endif %}
            </div>

            <div>
                浏览：{{ article.total_views }}
{#                href: {{ article.href }}#}

            </div>

        </div>


        <!-- 文章正文 -->
        <div class="col-12">
            <p>{{ article.body|safe }}</p>
        </div>


            <!-- 发表评论 -->
            <hr>
            {% if user.is_authenticated %}
                <div>
                    <form
                        action="{% url 'comment:post_comment' article.id %}"
                        method="POST"
                    >
                    {% csrf_token %}
                        <div class="form-group">
                            <label for="body">
                                <strong>
                                    我也要发言：
                                </strong>
                            </label>
                            <textarea
                                type="text"
                                class="form-control"
                                id="body"
                                name="body"
                                rows="4"></textarea>
                        </div>
                        <!-- 提交按钮 -->
                        <button type="submit" class="btn btn-primary ">发送</button>
                    </form>
                </div>
                <br>
            {% else %}
                <br>
                <h5 class="row justify-content-center">
                    请<a href="{% url 'userprofile:login' %}">登录</a>后回复
                </h5>
                <br>
            {% endif %}



            <!-- 显示评论 -->
            <div class="show_comments">
                <div>
                     <p style="font-size: 1.5em;"><strong>共有{{ comments.count }}条评论: </strong></p>
                    {% for comment in comments %}
                        <hr>
                        <p>
                            <strong style="color: pink">
                                {{ comment.user }}
                            </strong> 于
                            <span style="color: green">
                                {{ comment.created|date:"Y-m-d H:i:s" }}
                            </span> 时说：
                        </p>
                        <pre class="user_comments">{{ comment.body }} </pre>
                    {% endfor %}
                </div>
            </div>


        </div>
    </div>
</div>




<script>
    // 删除文章的函数
    function confirm_delete() {
        // 调用layer弹窗组件
        layer.open({
            // 弹窗标题
            title: "确认删除",
            // 正文
            content: "确认删除这篇文章吗？",
            // 点击确定按钮后调用的回调函数
            yes: function(index, layero) {
                // 指定应当前往的 url
                $('form#safe_delete button').click();
                layer.close(index);
            },
        })
    }

</script>


<script>
    var jump_to_href = "{{ article.href }}";
    console.log("jump_to_href: " + jump_to_href);
    $("#jump_href").attr("title",  "跳转到: " + jump_to_href);
</script>



<style>
    .codehilite {
	color:#444;
	margin:15px auto;
	padding:20px 15px;
	/*border:3px dashed #ddd;*/
	/*border:3px ;*/
	border-left:8px solid #bbb;
    background: #f8f8f8;
	background-size:100% 44px
    }

    blockquote {
    border-left: 4px solid #dfe2e5;
    padding: 0 15px;
    color: #777777;
    }

    .user_comments{
        color: #155724;
        background-color: #d4edda;
        border-color: #c3e6cb;
        text-align: right;
        letter-spacing: 1px;
        /*margin: 21px 41px 31px 41px;*/
        font-family: inherit;
        font-size: 1em;
    }

    .show_comments{
        /*float:right;*/
        display: flex;
        width:40%;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }
</style>
<!-- style="font-family: inherit; font-size: 1em;"-->
{% endblock content %}
